<!DOCtype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>vue_023_父组件向子组件传值的数据类型</title>

</head>
<body>
    <div id="app">
        组件的注册，关键字：component <br />
        父组件向子组件传值：关键字 props<br />
        <menu-item></menu-item>
        <menu-item title1="父组件向子组件传递信息"></menu-item>

        动态的传递属性：<input type="text" v-model="title1" />
        <menu-item v-bind:title1="title1"></menu-item>

        传递多个属性，属性也尽量不要用驼峰式命名的方法
        <menu-item v-bind:title1="title1" title2="父组件向子组件传递第二个属性"></menu-item>

        父组件向子组件传递参数的数据类型：字符串String类型
        <zujian-string pstr="字符串类型"></zujian-string>

        父组件向子组件传递参数的数据类型：数值number类型<br />
        这里没有用v-bind绑定时，数据类型为String,引号可以不加，但是推荐加上引号
        <zujian-number pnumber='12'></zujian-number>
        这里用v-bind绑定后，数据类型为number<br />
        <zujian-number :pnumber='12'></zujian-number>

        父组件向子组件传递参数的数据类型：布尔boolean类型,引号可以不加，但是推荐加上引号<br />
        这里没有用v-bind绑定时，数据类型为String,引号可以不加，但是推荐加上引号
        <zujian-boolean pboolean='true'></zujian-boolean>
        这里用v-bind绑定后，数据类型为boolean<br />
        <zujian-boolean :pboolean='true'></zujian-boolean>

        父组件向子组件传递参数的数据类型：数组array类型<br />
        <zujian-array :parray='parray1'></zujian-array>

        父组件向子组件传递参数的数据类型：对象object类型<br />
        <zujian-object :pobject='pobject'></zujian-object>
    </div>
    <script src="js/vue.js"></script>
    <script type="text/javascript">
    //component() 两个参数  参数一：组件的名称  参数二：是一个对象
    //组件名称只能出现首写字母大写，其余的都不能大写，如果使用驼峰式的明明方式，在使用组件的时候，只能在模板中使用组件
        // Vue.component("ZujianName",{ //这是驼峰式组件
        Vue.component("menu-item",{
            props:["title1","title2"],
            //对象中两个重要的属性  第一个是data（data的值是一个函数）  第二个是组件的模板内容,关键字 template
            data:function(){
                //对象中放具体的数据
                return {
                    msg:"子组件本身的数值"
                }
            },
            //组件的内容实际上就是一个字符串
            // template:"<button @click='method1'>点击了{{count}}次</button>",
            //反引号位于左上角，数字1键的左边、Esc键的下方
            template:`
                <div style="border:1px solid red;height:50px;width:1000px">
                    {{msg + "---" + title1 + "---" + title2}}
                </div>
            `
        });
        //父组件向子组件传递的数据类型：字符串String类型
        Vue.component("zujian-string",{
            props:["pstr"],
            template:`
                <div style="border:1px solid red;height:50px;width:1000px">
                    {{pstr}}
                </div>
            `
        });
        //父组件向子组件传递的数据类型：数值number类型
        Vue.component("zujian-number",{
            props:["pnumber"],
            template:`
                <div>
                    <div style="border:1px solid red;height:50px;width:1000px">
                        {{pnumber + "---" + typeof pnumber}}
                    </div>
                </div>
            `
        });
        //父组件向子组件传递的数据类型：布尔boolean类型
        Vue.component("zujian-boolean",{
            props:["pboolean"],
            template:`
                <div>
                    <div style="border:1px solid red;height:50px;width:1000px">
                        {{pboolean + "---" + typeof pboolean}}
                    </div>
                </div>
            `
        });
        //父组件向子组件传递的数据类型：数组array类型
        Vue.component("zujian-array",{
            props:["parray"],
            template:`
                <div style="border:1px solid red;height:100px;width:1000px">
                    <ul>
                        <li v-for="item in parray">    
                            {{item}}
                        </li>    
                    </ul>
                </div>
            `
        });
        //父组件向子组件传递的数据类型：对象object类型
        Vue.component("zujian-object",{
            props:["pobject"],
            template:`
                <div style="border:1px solid red;height:50px;width:1000px">
                    {{"姓名：" + pobject.name + "，年龄" + pobject.age + "，性别：" + pobject.sex}}
                </div>
            `
        });


        var vm = new Vue({
            el:'#app',
            data:{
                title1:"父组件动态向子组件传递消息",
                parray1:['apple',"banana","orgran"],
                pobject:{
                    name:"张三",
                    age:13,
                    sex:"男"
                }
            }
        });

    </script>
</body>

</html></SCRIPT>